<template>
  <!-- 主内容区域 -->
  <main class="main-content">
    <section class="dashboard">
      <h2>欢迎来到后台管理系统</h2>
      <div class="cards">
        <div class="card">
          <h3>今日订单</h3>
          <p>128</p>
        </div>
        <div class="card">
          <h3>新增用户</h3>
          <p>56</p>
        </div>
        <div class="card">
          <h3>销售额</h3>
          <p>¥ 12,345</p>
        </div>
      </div>
      <!-- echarts图表 -->
      <div ref="chartDom" style="width: 600px; height: 400px; margin:auto"></div>
    </section>
  </main>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';

// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;

// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  chartInstance = echarts.init(chartDom.value);
  const option = {
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
    title: {
      text: 'ECharts 示例图表'
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
      name: '数据系列',
      type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
      data: [120, 200, 150, 80, 70, 121]
    }]
  };
  chartInstance.setOption(option);
});

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});

</script>

<style scoped>
/* 主内容区域样式 */
.main-content {
  flex: 1;
  background-color: #fff;
}

.dashboard {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;

}

.dashboard h2 {
  margin-bottom: 20px;
}

.cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  margin: 0 10px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card h3 {
  margin-bottom: 10px;
}

.charts {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}
</style>